<template>
  <div class="main">
    <div class="middle">
      <div class="tool">
        <!--功能按钮-->
        <el-row>
          <el-button icon="el-icon-download" type="primary" size="small"
                     @click="handleDownloadRule()" round>生成表单JSON</el-button>
          <el-button icon="el-icon-upload2" type="success" size="small"
                     @click="handleUploadRule()" round>导入表单JSON</el-button>
          <el-button icon="el-icon-download" type="primary" size="small"
                     @click="handleDownloadOption()" round>生成表单配置</el-button>
          <el-button icon="el-icon-upload2" type="success" size="small"
                     @click="handleUploadOption()" round>导入表单配置</el-button>
        </el-row>
      </div>
      <!--表单构建器-->
      <fc-designer class="form-build" ref="designer"/>
    </div>

    <!--对话框-->
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogState"
               :close-on-click-modal="false"
               append-to-body>
      <codemirror v-model="codemirrorContent"
                  :options="codemirrorOptions"
                  style="height: 90%;text-align: left;border: 1px solid #ccc;">
      </codemirror>
      <el-row v-if="dialogMenu">
        <el-button @click="dialogState = false">取 消</el-button>
        <el-button type="primary" @click="handleImport()">导 入</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import { codemirror } from 'vue-codemirror'
  import "codemirror/theme/ambiance.css";  // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
  require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！

  export default {
    beforeCreate() {
      // 开启JSON校验
      window.jsonlint = jsonlint
    },
    data() {
      return {
        dialogTitle: '', // 对话框标题
        dialogState: false, // 对话框状态
        dialogMenu: false, // 对话框菜单状态

        // codemirror配置
        codemirrorOptions: {
          mode: "application/json",
          theme: "default",
          gutters: ['CodeMirror-lint-markers'],
          tabSize: 2,
          lint: true,
          line: true,
          lineNumbers: true,
          matchBrackets: true,
          lineWrapping: true,
          styleActiveLine: true,
          readOnly: false
        },
        // codemirror内容
        codemirrorContent: null
      }
    },
    components: {
      codemirror
    },
    methods: {
      // 导出表单JSON
      handleDownloadRule(){
        this.dialogTitle = "表单规则"
        this.dialogState = true
        this.dialogMenu = false

        this.codemirrorOptions.readOnly = true
        this.codemirrorContent = JSON.stringify(this.$refs.designer.getRule(),
          null, 2)
      },
      // 导出表单配置
      handleDownloadOption(){
        this.dialogTitle = "表单配置"
        this.dialogState = true
        this.dialogMenu = false

        this.codemirrorOptions.readOnly = true
        this.codemirrorContent = JSON.stringify(this.$refs.designer.getOption(),
          null, 2)
      },
      // 导入表单JSON
      handleUploadRule(){
        this.dialogTitle = "导入表单规则"
        this.dialogState = true
        this.dialogMenu = true

        this.codemirrorOptions.readOnly = false
        this.codemirrorContent = JSON.stringify([], null, 2)
      },
      // 导入表单配置
      handleUploadOption(){
        this.dialogTitle = "导入表单配置"
        this.dialogState = true
        this.dialogMenu = true

        this.codemirrorOptions.readOnly = false
        this.codemirrorContent = JSON.stringify({}, null, 2)
      },
      // 配置导入
      handleImport(){
        try {
          let content = JSON.parse(this.codemirrorContent)
          if(this.dialogTitle == "导入表单规则"){
            this.$refs.designer.setRule(content)
          }
          if(this.dialogTitle == "导入表单配置"){
            this.$refs.designer.setOptions(content)
          }
          this.dialogState = false
        } catch(e) {
          alert('输入内容格式有误!')
        }
      }
    }
  }

</script>
